<template>
  <view class="container">
    <!-- 已预约时间 -->
    <view class="yuyuebox">
      <!-- 周几 -->
      <view style="display: flex; align-items: center; margin-top: 30rpx; margin-bottom: 26rpx">
        <view :class="{ common: true, act: actindex == index }" v-for="(item, index) in list" :key="index" @click="chooseweek(index)">
          <text style="display: block">{{ item.name }}</text>
          <text style="display: block; font-size: 26rpx">{{ item.week_date.split('-')[1] + '-' + item.week_date.split('-')[2] }}</text>
        </view>
      </view>
      <!-- 时间段 -->
      <view style="display: flex; flex-wrap: wrap">
        <view
          :class="{ yuyueitem: true, timecommon: item2.isTrue || (item2.status == 2 && item2.user_cancel == 2), yiyuyue: item2.status == 2 && item2.user_cancel == 0 }"
          v-for="(item2, index) in list[actindex].list"
          :key="item2.id"
          @click="choosetime(index, item2)"
        >
          <view>{{ item2.status == 1 ? '可预约' : item2.status == 2 && item2.user_cancel == 2 ? '取消预约' : '已预约' }}</view>
          <view>{{ item2.time_slot }}</view>
        </view>
      </view>
      <view style="margin-top: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 30rpx; color: #666666">
        课程可分开预约，预约成功后自动扣除已预约过的课时，剩余课程 可在进行中的订单中继续预约
      </view>
    </view>
    <!-- 提交 -->
    <view class="submit" @click="goback">提交</view>
  </view>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      actindex: '0',
      timeindex: null,
      list: [], // 数据列表
      idlist: [], //选中的时间段id
      currentteacherid: '', // 当前教师的id
      currentorderid: '', // 当前订单的id
      keshiid: '' // 当前订单的课时id
    };
  },
  methods: {
    // 选择周几
    chooseweek(index) {
      this.actindex = index;
    },
    // 选择时间
    choosetime(index, item2) {
      // console.log(item2);
      // 禁止点击别人已预约的时间
      if (this.list[this.actindex].list[index].user_cancel == 0 && this.list[this.actindex].list[index].status == 2) {
        return uni.showToast({
          title: '该时间段已被其他同学预约',
          icon: 'none'
        });
      }
      // 取消课时
      if (item2.status == 2 && item2.user_cancel == 2) {
        // console.log(111111, '取消课时');
        item2.isTrue = false;
        this.canceltime(item2.id);
      }
      this.timeindex = index;
      this.list[this.actindex].list[index].isTrue = !this.list[this.actindex].list[index].isTrue;
    },
    // 取消课时
    async canceltime(id) {
      const res = await uni.$http.post('/user_order/teacherSetupCancel', {
        teacher_setup_id: id
      });
      // console.log('取消课时成功', res);
      if (res.data.code == 1) {
        let index = this.idlist.findIndex((item) => {
          return item == id;
        });
        this.idlist.splice(index, 1);
        uni.showToast({
          title: '取消预约成功',
          icon: 'none'
        });
        this.getsktime(this.currentteacherid);
      }
    },
    // 提交时间段
    async goback() {
      uni.showLoading();
      this.idlist = [];
      this.list.forEach((item) => {
        item.list.forEach((item2) => {
          if (item2.isTrue) {
            this.idlist.push(item2.id);
          }
        });
      });

      console.log('选中的时间段', this.idlist);
      // 检测时间段是否可选
      this.idlist = [...new Set(this.idlist)];
      console.log(this.idlist.join(','), this.keshiid);
      const isuse = await uni.$http.post('/user_order/checkAppointment', {
        teacher_setup_id: this.idlist.join(','),
        period_id: this.keshiid
      });
      console.log(isuse);
      if (isuse.data.code == 1) {
        // 预约课程
        const res = await uni.$http.post('/user_order/orderPreSave', {
          teacher_setup_id: this.idlist.join(','),
          order_id: this.currentorderid
        });
        console.log('预约课程', res.data);
        if (res.data.code == 1) {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
          this.idlist = [];
          console.log('提交后的时间段', this.idlist);
          this.getsktime(this.currentteacherid);
        } else {
          this.idlist = [];
        }
      } else {
        this.idlist = [];
      }
      uni.hideLoading();
      return;
    },
    // 获取上课时间
    async getsktime(id) {
      const res = await uni.$http.post('/user_order/teacherSetupList', {
        teacher_id: id,
        order_id: this.currentorderid
      });
      // console.log('上课时间', res);
      this.list = res.data.data;
      this.list.forEach((item) => {
        item.list.forEach((item) => {
          Vue.set(item, 'isTrue', false);
        });
      });
      // console.log(this.list);
    }
  },
  async onLoad(e) {
    console.log(e.teacherid, e.keshiid);
    this.currentteacherid = e.teacherid;
    this.currentorderid = e.orderid;
    this.keshiid = e.keshiid;
    // 获取上课时间
    await this.getsktime(e.teacherid);
  },
  onShow() {
    console.log(this.keshiid);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .yuyuebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 434rpx;
    margin: 20rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .common {
      width: 102rpx;
      height: 80rpx;
      font-size: 28rpx;
      text-align: center;

      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .act {
      background: #ecefff;
      color: #3553e8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
    .yuyueitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 110rpx;
      background: #ffffff;
      margin-right: 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
    .timecommon {
      background: #e8ecff;
      border: 2rpx solid #3553e8;
      color: #3553e8;
    }
    .yiyuyue {
      background: #f9f9f9;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 60rpx;
    left: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #3553e8;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    border-radius: 100rpx;
  }
}
</style>
